<template>
  <div>
    <!-- 返回仪表盘按钮 -->
    <el-button type="primary" @click="navigateToDashboard" icon="el-icon-arrow-left">返回仪表盘</el-button>
    <!-- 添加订单按钮 -->
    <el-button type="success" @click="showAddOrderDialog" icon="el-icon-plus">添加订单</el-button>
    <div style="opacity: 0.8;">
      <!-- 客户名搜索框 -->
      <el-input v-model="searchQuery" placeholder="输入客户名查找" style="margin: 20px 0;"></el-input>
    </div>
    <!-- 添加订单对话框 -->
    <el-dialog title="添加订单" :visible.sync="addOrderDialogVisible">
      <el-form :model="newOrder" @submit.native.prevent="addOrder" :rules="rules" ref="newOrderForm">
        <el-form-item label="客户名" prop="customerName">
          <el-input v-model="newOrder.customerName"></el-input>
        </el-form-item>
        <el-form-item label="总金额" prop="totalAmount">
          <el-input v-model="newOrder.totalAmount"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrder">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑订单对话框 -->
    <el-dialog title="编辑订单" :visible.sync="editOrderDialogVisible">
      <el-form :model="editOrderData" @submit.native.prevent="updateOrder" :rules="rules" ref="editOrderForm">
        <el-form-item label="客户名" prop="customerName">
          <el-input v-model="editOrderData.customerName"></el-input>
        </el-form-item>
        <el-form-item label="总金额" prop="totalAmount">
          <el-input v-model="editOrderData.totalAmount"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateOrder">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div style="opacity: 0.8;">
      <!-- 订单列表 -->
      <el-table :data="filteredOrders" style="margin-top: 20px;">
        <el-table-column prop="id" label="订单ID"></el-table-column>
        <el-table-column prop="customerName" label="客户名"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button size="mini" type="primary" @click="openEditOrderDialog(scope.$index)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button size="mini" type="danger" @click="deleteOrder(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addOrderDialogVisible: false, // 控制添加订单对话框显示状态
      editOrderDialogVisible: false, // 控制编辑订单对话框显示状态
      newOrder: { // 新订单数据
        customerName: '',
        totalAmount: ''
      },
      editOrderData: { // 编辑的订单数据
        customerName: '',
        totalAmount: ''
      },
      editIndex: -1, // 编辑订单的索引
      searchQuery: '', // 搜索查询关键字
      rules: { // 表单验证规则
        customerName: [
          { required: true, message: '请输入客户名', trigger: 'blur' }
        ],
        totalAmount: [
          { required: true, message: '请输入总金额', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    orders() {
      return this.$store.state.orders; // 获取订单列表数据
    },
    filteredOrders() {
      // 根据搜索查询过滤订单列表
      const query = this.searchQuery.trim().toLowerCase();
      return this.orders.filter(order => 
        order.customerName.toLowerCase().includes(query)
      );
    }
  },
  mounted() {
    // 获取订单数据
    this.$store.dispatch('fetchOrders');
  },
  methods: {
    navigateToDashboard() {
      // 返回仪表盘页面
      this.$router.push({ name: 'dashboard' });
    },
    showAddOrderDialog() {
      // 显示添加订单对话框
      this.addOrderDialogVisible = true;
    },
    addOrder() {
      // 表单验证并添加订单
      this.$refs.newOrderForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch('addOrder', this.newOrder);
          this.addOrderDialogVisible = false;
          this.newOrder = { // 清空表单数据
            customerName: '',
            totalAmount: ''
          };
        }
      });
    },
    openEditOrderDialog(index) {
      // 打开编辑订单对话框
      this.editOrderData = { ...this.orders[index] };
      this.editIndex = index;
      this.editOrderDialogVisible = true;
    },
    updateOrder() {
      // 表单验证并更新订单
      this.$refs.editOrderForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch('updateOrder', { index: this.editIndex, order: this.editOrderData });
          this.editOrderDialogVisible = false;
        }
      });
    },
    deleteOrder(index) {
      // 删除订单
      this.$store.dispatch('deleteOrder', index);
    }
  }
};
</script>
